<!-- login.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户登录 - 技术社区</title>
    <link rel="stylesheet" href="./static/element-plus/index.css">
    <script src="./static/js/vue.global.js"></script>
    <script src="./static/element-plus/index.full.js"></script>
    <style>
        .login-container {
            width: 100%;
            min-height: 100vh;
            background: url('./static/images/login-bg.jpg') no-repeat center/cover;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .login-form {
            width: 400px;
            padding: 30px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .title {
            text-align: center;
            margin-bottom: 30px;
            color: #303133;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="login-container">
            <el-form 
                :model="loginForm" 
                :rules="loginRules" 
                ref="loginFormRef"
                class="login-form"
                @keyup.enter="submitForm"
            >
                <h2 class="title">技术社区登录</h2>
                
                <el-form-item prop="username">
                    <el-input
                        v-model="loginForm.username"
                        prefix-icon="el-icon-user"
                        placeholder="请输入用户名"
                    ></el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input
                        v-model="loginForm.password"
                        prefix-icon="el-icon-lock"
                        placeholder="请输入密码"
                        show-password
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button 
                        type="primary" 
                        style="width: 100%" 
                        :loading="loading"
                        @click="submitForm"
                    >
                        立即登录
                    </el-button>
                </el-form-item>

                <div style="text-align: right">
                    <el-link type="primary" @click="goToRegister">立即注册</el-link>
                </div>
            </el-form>
        </div>
    </div>

    <script>
        const App = {
            data() {
                return {
                    loginForm: {
                        username: '',
                        password: ''
                    },
                    loginRules: {
                        username: [
                            { required: true, message: '请输入用户名', trigger: 'blur' },
                            { min: 4, max: 16, message: '长度在4到16个字符', trigger: 'blur' }
                        ],
                        password: [
                            { required: true, message: '请输入密码', trigger: 'blur' },
                            { min: 6, max: 20, message: '长度在6到20个字符', trigger: 'blur' }
                        ]
                    },
                    loading: false
                }
            },
            methods: {
                submitForm() {
                    this.$refs.loginFormRef.validate(valid => {
                        if (!valid) return
                        
                        this.loading = true
                        
                        // 模拟API请求
                        setTimeout(() => {
                            // 登录成功处理
                            localStorage.setItem('isLoggedIn', 'true')
                            localStorage.setItem('username', this.loginForm.username)
                            
                            this.$message.success('登录成功')
                            window.location.href = 'index.html'
                        }, 1500)
                    })
                },
                
                goToRegister() {
                    window.location.href = 'register.html'
                }
            }
        }

        Vue.createApp(App)
            .use(ElementPlus)
            .mount('#app')
    </script>
</body>
</html>